<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>设备管理</a-breadcrumb-item>
        <a-breadcrumb-item>诱导屏管理</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">设备序列号</div>
          <template>
            <a-input
              style="margin: 0 200px 0 50px"
              placeholder="请输入序列号"
              v-model="inputSn"
            />
          </template>
          <div style="margin: 0 50px">设备类型</div>
          <template>
            <a-input
              style="margin: 0 200px 0 50px"
              placeholder="请输入设备类型"
              v-model="inputType"
            />
          </template>

          <!-- 清除 -->
          <div style="margin: 10px 0px">
            <a-button
              type="primary"
              style="margin: 0 0 0 20px"
              @click="loadDeviceList"
              >查询</a-button
            >
            <a-button style="margin: 0 0 0 20px" icon="sync" @click="reset"
              >重置</a-button
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 表内容 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
          <a-button type="primary" @click="editClick" icon="edit"
            >编辑</a-button
          >

          <!-- 删除 -->
          <template v-if="selectedRowKeys.length != 0">
            <a-popconfirm
              title="确认删除？"
              okText="确认"
              cancelText="取消"
              @confirm="deleteClick"
              placement="topLeft"
            >
              <a-button type="danger" icon="delete">删除</a-button>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-button type="danger" icon="delete" @click="deleteClick"
              >删除</a-button
            >
          </template>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          rowKey="no"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            columnWidth: '3.5%',
          }"
          :columns="columns"
          :dataSource="entryExitRecordList"
          :pagination="pagination"
          @change="tableTabSort"
          bordered
          size="small"
          :scroll="scroll"
        >
          <template slot="isValid" slot-scope="text">
            <div v-if="text == 0">无效</div>
            <div v-if="text == 1">有效</div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import AddPagesUtils from "../../utils/AddPagesUtils";
import Constant from "../../utils/Constant";

import GuideScreenApi from "../../api/equipment/GuideScreenManage";
const columns = [
  {
    title: "设备序列号",
    dataIndex: "sn",
    width: "11%",
  },
  {
    title: "停车点名称",
    dataIndex: "parkName",
    width: "11%",
  },
  {
    title: "设备名称",
    dataIndex: "deviceName",
    width: "8%",
  },
  {
    title: "设备类型",
    dataIndex: "deviceType",
    width: "10%",
  },
  {
    title: "设备型号",
    dataIndex: "deviceModelCode",
    width: "10%",
    sorter: () => {},
  },
  {
    title: "是否有效",
    dataIndex: "isValid",
    width: "10%",
    scopedSlots: { customRender: "isValid" },
    sorter: () => {},
  },
];

/*设备查询条件*/
const conditionOfDevice = {
  deviceSn: "",
  deviceType: "",
  limit: "10",
  curr: "1",
};

export default {
  name: "EquipmentManage",

  data() {
    return {
      /*查询条件*/
      conditionOfDevice,
      selectdevicevalidStatus: 2,
      inputSn: "",
      inputType: "",
      /*当前选中的行数据*/
      entryExitRecordList: [],
      columns,
      selectId: -1,
      parks: [],
      deviceUploadUrl: Constant.TEMPLATEUPLOAD_URL,
      uploadHeaders: {
        authorization: JSON.parse(localStorage.getItem("userinfo")).data,
      },

      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        current: 1,
        defaultPageSize: 10,
      },

      /* 表单选择 */
      selectedRowKeys: [] /* 选择key */,
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      loading: false,
    };
  },

  mounted() {
    this.initData();
  },

  methods: {
    initData() {
      this.loadDeviceList();
    },

    /* ---------------- 外部表单操作 ---------------- */
    addClick() {
      AddPagesUtils.showAddPages(Constant.viewType.GUIDE_SCREEN_ADD);
      // AddPagesUtils.showAddPages(Constant.viewType.GUIDE_SCREEN_ADD, '', () => {
      //     this.loadDeviceList();
      // });
    },

    editClick() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }

      if (selectArray.length != 1) {
        this.$message.error("只能选择一个编辑");
        return;
      }

      let data = selectArray[0];
      AddPagesUtils.showAddPages(
        Constant.viewType.GUIDE_SCREEN_EDIT,
        data,
        () => {
          this.loadDeviceList();
        }
      );
    },

    deleteClick() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }

      let value = JSON.stringify(
        selectArray.map((item) => {
          return { deviceId: item.id, truckSpaceId: item.sn };
        })
      );

      GuideScreenApi.delGuideScreen(value)
        .then(() => {
          this.$message.success("删除成功！");
          this.loadDeviceList(); // 重新加载
        })
        .catch((err) => {
          let data = err.data,
            msg = err.msg;
          this.$message(data || msg);
        });
    },

    /* --------------- 设备查询条件 --------------- */
    /* 有效状态 */
    isvalidStatus(status) {
      this.selectdevicevalidStatus = status;
      this.loadDeviceList();
    },

    tableTabSort(pagination, filters, sorter) {
      let sortType = undefined;
      let sortField = undefined;
      if (sorter) {
        let { order, columnKey } = sorter;
        if (order === "descend") {
          sortType = 0;
        } else if (order == "ascend") {
          sortType = 1;
        }

        if (columnKey == "sn") {
          sortField = 0;
        } else if (columnKey == "device_name") {
          sortField = 1;
        } else if (columnKey == "device_type") {
          sortField = 2;
        } else if (columnKey == "is_valid") {
          sortField = 3;
        }
      }

      this.conditionOfDevice.sortType = sortType;
      this.conditionOfDevice.sortField = sortField;
      this.loadDeviceList(pagination.current);
    },

    resetQueryCondition() {
      this.inputSn = "";
      this.inputType = "";
      this.conditionOfDevice.deviceType = [];
      this.clearSelectArray();
    },

    deviceChange() {
      this.loadDeviceList();
    },

    /* --------------- 查询设备列表 --------------- */
    loadDeviceList(pageNum) {
      this.loading = true;
      this.clearSelectArray();
      /* ---- condition ---- */
      let condition = this.conditionOfDevice;
      condition.deviceSn = this.inputSn;
      condition.deviceType = this.inputType;
      condition.curr = pageNum || 1;

      /* ---- 查询 ---- */
      GuideScreenApi.getGuideScreenInfoList(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.entryExitRecordList = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },

    /* ---------------- 选中处理 ------------------- */
    getSelectArray() {
      let entryExitRecordList = this.entryExitRecordList || [];
      let selectedRowKeys = this.selectedRowKeys;
      return entryExitRecordList.filter((item) => {
        return selectedRowKeys.filter((no) => no == item.no).length > 0;
      });
    },

    clearSelectArray() {
      this.selectedRowKeys = [];
    },

    /* ----------------------------------------- */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    /* --------------- 内部弹窗 --------------- */
    seeLog_trigger(logUrl) {
      let url = encodeURI(logUrl).replace(/#/g, "%23");
      window.open(url);
    },

    log_flush(condition) {
      this.selectImei = condition.imei;
      this.selectLogHeartbeatTrigger(1, false);
    },

    downloadLogTrigger(logUrl) {
      let url = encodeURI(logUrl + "?attname=").replace(/#/g, "%23");
      window.open(url);
    },

    /*-----------------设备日志/设备心跳--------------*/
    /*点击遮罩层*/
    maskTap() {
      if (!this.maskClose) return;
      this.hideAddPages();
    },

    /*隐藏遮罩层*/
    hideAddPages() {
      this.isShowAddPages = false;
    },

    /*防止子类点击事件被穿透*/
    addPagesTap() {},

    doThis() {},

    /*时间按钮控制*/
    button_time(e, type) {
      //type 1 日志 2 心跳
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.selectLogHeartbeatTrigger(type, true);
    },

    /*日期选择*/
    heartbeatOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(2);
      }
    },

    logOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(1);
      }
    },

    onOk(type) {
      this.selectId = -1;
      this.selectLogHeartbeatTrigger(type, true);
    },

    rangePickerValue() {
      return this.momentArr;
    },
    reset() {
      this.inputSn = "";
      this.inputType = "";
      this.deviceChange();
    },
  },

  computed: {
    /*-----------------设备日志/设备心跳--------------*/
    computedShow() {
      return this.isShowAddPages ? "display: block;" : "display: none;";
    },
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "background-color: #FF7965" : "";
      };
    },
    computedBtnStyle() {
      return function (index) {
        return this.selectdevicevalidStatus === index
          ? "background-color: #FF7965"
          : "";
      };
    },
  },
};
</script>

<style scoped>
/*组件样式*/
/*文本框*/
.ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}

.clickRowStyl {
  background-color: #c1e0fd;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 120px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.button_online {
  margin-left: 62px;
  display: flex;
}

.button_online button {
  margin-right: 10px;
}

.box-tool button {
  margin-right: 10px;
}

/*-----------------设备日志/设备心跳--------------*/
.box-form-others {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.box-form-others .form {
  width: 970.5px;
  height: 500px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  /*max-height: ;*/

  position: fixed;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0);
  /* flex */
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.box .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}
</style>
